<template>
  <div class="bad-quantity-dialog dialog">
    <basic-dialog :visible="show"
                  minWidth="800px"
                  :title="title.label"
                  :isShowClose="true"
                  :isFullScreen="true"
                  @close="$emit('close')">
        <q-card-section class="no-padding">
          <q-table :data="tableData"
                   :columns="tableColumns"
                   row-key="id"
                   class="stick-last-col myTable scrollbar"
                   style="margin: 0; height: 350px"
                   hide-bottom
                   separator="horizontal"
                   :pagination.sync="pagination"
                   no-data-label="暂无数据"
                   :loading="isTableLoading"
                   color="primary">
            <template v-slot:body-cell-operations="props">
              <q-td class="operations"
                    style="width: 100px">
                <div class="btn-group"
                     style="text-align: center">
                  <q-btn style="font-size: 18px"
                         flat
                         round
                         dense
                         color="primary"
                         v-has="{id: Enums.SYS_PERMISSION.EDIT_BAD_NUM_BTN.value}"
                         @click="onEditor(props.row)"
                         class="iconfont icontubiao-12">
                    <q-tooltip>编辑</q-tooltip>
                  </q-btn>
                  <q-btn style="font-size: 18px"
                         flat
                         round
                         dense
                         color="primary"
                         class="iconfont icontubiao-16"
                         v-has="{id: Enums.SYS_PERMISSION.DEL_BAD_NUM_BTN.value}"
                         @click="onDelete(props.row)">
                    <q-tooltip>删除</q-tooltip>
                  </q-btn>
                </div>
              </q-td>
            </template>
          </q-table>
          <div class="addBtn">
            <q-btn flat
                   dense
                   color="primary"
                   class="full-height full-width"
                   v-has="{id: Enums.SYS_PERMISSION.ADD_BAD_NUM_BTN.value}"
                   @click="onAdd">
              <q-icon name="iconfont icontubiao-39"
                      class="q-mr-sm" />
              添加
            </q-btn>
          </div>
        </q-card-section>
    </basic-dialog>
    <bad-editor-dialog :open="open"
                       :editorData="editorData"
                       :isAdd="isAdd"
                       :recordData='recordData'
                       :init="getQualityCauses"
                       @close="open = false"
                       :msg="title">
    </bad-editor-dialog>
  </div>
</template>

<script>
import {
  getQualityCauses,
  delQualityCauses
} from '../../../boot/job/quality-order'
import badEditorDialog from './bad-editor-dialog'
import _ from 'lodash'
export default {
  name: 'bad-quantity-dialog',
  components: {
    badEditorDialog
  },
  props: {
    show: {
      type: Boolean,
      default: false,
      required: true
    },
    title: Object,
    recordData: Object
  },
  data () {
    return {
      isTableLoading: false,
      open: false, // 编辑弹窗
      isAdd: false, // 显示编辑or添加
      tableData: [],
      editorData: {},
      // 表格不分页
      pagination: {
        rowsPerPage: 0
      }
    }
  },
  computed: {
    tableColumns () {
      const colums = [
        {
          name: 'index',
          field: 'index',
          label: '序号',
          align: 'left'
        },
        {
          name: 'shiftsName',
          field: 'shiftsName',
          label: '加工班次',
          align: 'left'
        },
        {
          name: 'gidName',
          field: 'gidName',
          label: `${this.title.title}类型`,
          align: 'left'
        },
        {
          name: 'causeName',
          field: 'causeName',
          label: `${this.title.title}原因`,
          align: 'left'
        },
        {
          name: 'count',
          field: 'count',
          label: '数量',
          align: 'left'
        },
        {
          name: 'name',
          field: 'name',
          label: '操作人',
          align: 'left'
        },
        {
          name: 'remark',
          field: 'remark',
          label: '说明',
          align: 'left'
        },
        {
          name: 'operations',
          field: 'operations',
          label: '操作',
          align: 'left'
        }
      ]
      const cloneArr = _.cloneDeep(colums)
      cloneArr.splice(2, 1)
      return this.title.value === 'concession' ? cloneArr : colums
    }
  },
  methods: {
    // 获取不良/让步详细
    getQualityCauses () {
      this.isTableLoading = true
      const params = {
        id: this.recordData.id,
        isCompromiseCause: this.title.value === 'concession'
      }
      getQualityCauses(params)
        .then(res => {
          res.data.map((v, i) => {
            const item = v
            item.index = i + 1 // 序号
            item.causeId = v.causeId // 原因id
            item.causeName = v.causeName // 原因名称
            item.count = v.count // 数量
            item.createTime = v.createTime // 录入时间
            item.gid = v.gid // 原因类型名称
            item.gidName = v.gidName || '--'
            item.id = v.id // 质检原因id
            item.name = v.name // 操作员
            item.remark = v.remark // 备注
            item.shiftsId = v.shiftsId // 轮班id
            item.shiftsModeId = v.shiftsModeId // 轮班模式id
            item.shiftsName = v.shiftsName // 轮班
            return item
          })

          this.tableData = res.data
          this.isTableLoading = false
        })
        .finally(() => {
          this.isTableLoading = false
        })
    },
    /**
     *
     *添加
     */
    onAdd () {
      this.isAdd = true
      this.open = true
    },
    /**
     *
     *编辑
     */
    onEditor (row) {
      this.open = true
      this.isAdd = false
      this.editorData = row
    },
    /**
     *
     *
     */
    onDelete (row) {
      const { id, causeName } = row
      const params = {
        id: id,
        label: causeName
      }
      this.$q
        .dialog({
          title: `<p class="dialog-notice-title"><i class="iconfont icontubiao-28"></i>
          确定要删除此项吗？</p>`,
          html: true,
          ok: {
            unelevated: true,
            label: '确认'
          },
          cancel: {
            unelevated: true,
            outline: true,
            label: '取消'
          }
        })
        .onOk(() => {
          delQualityCauses(params).then(res => {
            if (res.code === '1200') {
              this.getQualityCauses()
              this.$message.success('删除成功')
            }
          })
        })
    }
  },
  watch: {
    show (pro) {
      if (pro) {
        this.getQualityCauses()
      }
    }
  },
  mounted () {}
}
</script>

<style scoped lang="stylus">
.addBtn
  width 100%
  text-align center
  border-bottom 1px solid #eee
  height: 48px
  line-height 48px
</style>
